import { AiTopicController } from '../../controller';
import { ChatTopic } from '../../entity';
import { Namespace } from '../../utils';
import { ChatTopicItem } from '../chat-topic-item/chat-topic-item';
import './chat-topics.scss';

export interface ChatTopicProps {
  /**
   * 话题控制器
   *
   * @author tony001
   * @date 2025-02-20 17:02:49
   * @type {AiTopicController}
   */
  controller: AiTopicController;
}

const ns = new Namespace('chat-topics');

export const ChatTopics = (props: ChatTopicProps) => {
  const topics = props.controller.topics;

  /**
   * 项点击
   *
   * @author tony001
   * @date 2025-02-24 10:02:31
   * @param {ChatTopic} topic
   */
  const itemClick = (topic: ChatTopic) => {
    props.controller.handleTopicChange(topic);
  };

  /**
   * 话题行为
   *
   * @author tony001
   * @date 2025-02-24 10:02:22
   * @param {string} action
   * @param {ChatTopic} topic
   * @param {MouseEvent} event
   */
  const handleTopicAction = (
    action: string,
    topic: ChatTopic,
    event: MouseEvent,
  ) => {
    props.controller.handleTopicAction(action, topic, event);
  };

  return (
    <div className={ns.b()}>
      {topics.value.map(topic => {
        return (
          <ChatTopicItem
            key={topic.id}
            topic={topic}
            current={topic.id === props.controller.currentTopicOptions?.id}
            active={topic.id === props.controller.activedTopic.value?.id}
            onClick={() => itemClick(topic)}
            onAction={(action: string, event: MouseEvent) =>
              handleTopicAction(action, topic, event)
            }
          />
        );
      })}
    </div>
  );
};
